<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.go(-3)" v-if="$route.query.type == 'shop'"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			<div class="icon-left" @click="$router.go(-4)" v-else><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			订单详情
			<div style="width: 40px;"></div>
		</div>
		<div class="header-null"></div>
		<div class="order-payStatus" v-if="!payStatus && !cancelOrder">
			<div>
				<img src="../../static/img/icon/find_icon/money.png"/>
				等待买家付款
			</div>
			<div>
				订单将于{{minutes}}分{{seconds}}秒后自动取消
			</div>
		</div>
		<div class="order-payStatus" v-else-if="cancelOrder">
			<div>交易取消</div>
			<div>您的订单已取消</div>
		</div>
		<div class="order-payStatus" v-else>
			<div>
				买家已付款
			</div>
			<div></div>
		</div>
		<div class="order-address">
			<div class="order-address-img">
				<img src="../../static/img/icon/diary_icon/location@2x.png"/>
			</div>
			<div class="order-address-content">
				<div class="order-address-content-top">
					<div class="order-address-content-top-title">收货人：{{locationInfo.consignee}}</div>
					<div class="order-address-content-top-phone">
						<img src="../../static/img/icon/my_icon/receivingtelephone@2x.png"/>
						<div>{{locationInfo.contactWay}}</div>
					</div>
				</div>
				<div class="order-address-content-bottom">
					收货地址：{{locationInfo.deliveryAddress}}
				</div>
			</div>
			<!--<div class="order-address-right">
				<img src="../../static/img/icon/my_icon/arrow@2x.png"/>
			</div>-->
		</div>
		<div class="order-list" v-for="i in list">
			<div class="title">
				<img src="../../static/img/icon/my_icon/merchant@3x.png"/>
				{{i.sellerName || '喜绿商城'}}
				<img src="../../static/img/icon/my_icon/arrow@3x.png"/>
			</div>
			<div class="order-list-item" v-for="(item, index) in i.orderCommodityList">
				<div>
					<img  src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg"/>
				</div>
				<div class="right">
					<div class="order-list-item-title">
						{{item.commodityName}}
					</div>
					<div class="order-list-type">
						{{item.attributeName}}：{{item.sortName}}
					</div>
					<div class="order-list-bottom">
						<div class="order-list-num-left">
							￥{{item.sortPrice}}
						</div>
						<div class="order-list-num-right">
							x{{item.buyCount}}
						</div>
					</div>
				</div>
			</div>
			<div class="order-more-total-item">
				<div>快递运费</div>
				<div>{{i.expressFee == 0 ?'免邮':i.expressFee}}</div>
			</div>
			<div class="order-more-total-item">
				<div></div>
				<div>小计：<span>{{i.payPrice}}</span></div>
			</div>
		</div>
		<!--<div class="order-list" v-else>
			<div class="order-list-item" v-for="(item, index) in list">
				<div>
					<img :src="item.titleUrl.split(',')[0]"/>
				</div>
				<div class="right">
					<div class="order-list-item-title">
						{{item.commodityName}}
					</div>
					<div class="order-list-type">
						{{item.attributeName}}：{{item.sortName}}
					</div>
					<div class="order-list-bottom">
						<div class="order-list-num-left">
							￥{{item.sortPrice}}
						</div>
						<div class="order-list-num-right">
							x{{item.buyCount}}
						</div>
					</div>
				</div>
			</div>
		</div>-->
		<div class="order-pay">
			<div class="item">
				<div>订单总价</div>
				<div>￥{{info.allOrderPrice}}</div>
			</div>
			<div class="item">
				<div>快递费</div>
				<div>￥{{info.allOrderPrice - info.allCommodityPrice}}</div>				
			</div>
			<div class="item">
				<div>优惠券</div>
				<div>￥{{info.allCouponsReduceMoney}}</div>				
			</div>
			<div class="item bottom">
				<div>需付款</div>
				<div>￥{{info.allPayPrice}}</div>				
			</div>
		</div>
		<div class="order-payment">
			<div class="order-payment-item" v-for="(item, index) in payImg">
				<div>
					<img :src="item.img"/>
					<div>
						{{item.title}}
					</div>
				</div>
				<div @click="payCheck(item)">
					<img v-if="!item.check" src="../../static/img/icon/release_icon/weixuanzhong@2x.png"/>
					<img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"/>
				</div>
			</div>
		</div>
		<div style="width: 100%;height: 40px;"></div>
		<div class="order-fixed">
			<div></div>
			<div v-if="!payStatus && !cancelOrder">
				<div @click="cancel"><span>取消订单</span></div>
				<div @click="pay"><span>付款</span></div>
			</div>
			<div v-else-if="cancelOrder" @click="deleted">
				<div><span>删除订单</span></div>
			</div>
			<div v-else>
				<div @click="$router.go(-3)" v-if="$route.query.type == 'shop'"><span>返回商城</span></div>
				<div @click="$router.go(-4)" v-else><span>返回商城</span></div>
			</div>
		</div> 
	</div>
</template>

<script>
	import {getData} from '../service/getData';

	export default 	{
		data() {
			return {
				check1: [false, false , true],
				payImg: [
					{
						img: '../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png',
						title: '余额支付',
						check: false,
					},
					{
						img: '../../static/img/icon/find_icon/zfb.png',
						title: '支付宝支付',
						check: false,
					},
					{
						img: '../../static/img/icon/find_icon/wx.png',
						title: '微信支付',
						check: true,
					}
				],
				check2: false,
				payStatus: false,
				cancelOrder: false,
				minutes:10,
            	seconds:0,
            	info: {},
            	list: [],
            	locationInfo: {},
            	time: null
			}
		},
		methods: {
			alipay(){
               getData('/orders/payDemo',{}).then(d=>{
				var url='https://openapi.alipay.com/gateway.do?'+d.extend.result;
				console.log(url);
				alert(url)
				window.location.href=url;
				 })
			},
			wechatPay(){

			},
			pay(obj) { //支付
				let index = 0
				this.payImg.map((x,i) => {
					if(x.check) {
						index = i
					}
				})
                 let payType=index+1;
			 
				 if(payType==1){

				 }
				 if(payType==2){
				 	this.alipay()
                    window.location.href='https://openapi.alipay.com/gateway.do?alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2018041402556436&biz_content=%7B%22body%22%3A%22%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%980.1%E5%85%83%22%2C%22out_trade_no%22%3A%2251565060%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22subject%22%3A%22%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%98%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%7D&charset=utf-8&format=json&method=alipay.trade.wap.pay&return_url=http%3A%2F%2F120.79.173.209%3A8080%2FxilvAPP%2Fuser%2Flogin&sign=3eyAEG%2FJTvOvlmk8ksgfLEwYLfK97X8U%2BegkM61yB%2FjJXBugRBAS5STeWYKLY3dUaVAXiJKAfBQ%2BrKCYlRR2J7PuXsCnXCk9iJ2snjTk43rqq6M0EBMN1AO3riXYTXSlcYdb9nCog1FnG%2B6jSdv%2B0hRfvuxuT4nQLforCKZsfMm83JNZHKjE9JzYADoM64VMAiViVDasB7sk%2B54QHMYxexjmFyZWC31mUfiop4Y7qJGpi%2Bu8jARsXqVZItKTCx9J4XiZKTiXXSRom%2FSCrRpNddyWqRN56cRRPjZ9XCMQlVCqdVzM3CJyYiL5rZWwUsM%2BuXeIOerLA3euC9rq7AKM%2BQ%3D%3D&sign_type=RSA2&timestamp=2019-01-18+14%3A20%3A57&version=1.0';
				 }
				 if(payType==3){
                    window.location.href='https://wxpay.wxutil.com/mch/pay/h5.v2.php';
				 } 
		 
 
				getData('/orders/getPayInfoByPayNoApi', {
					payNo:this.$route.query.id,
					payWay: index + 1,
					userId: sessionStorage.userId,
				}).then(d => {
                      alert(plus)
 
					plus.nativeUI.closeWaiting();
					var channel=null;
					var _this =this
					if(d.code == 0) {
						alert(d.msg)
					} else if(d.code == 1) {
						alert(d.msg)
						this.payStatus = true
					}

					plus.payment.getChannels(function(channels){
					    if(index == 1) {
					    	channel=channels[0];
					    } else if(index == 2) {
					    	channel=channels[1];
					    }
					   
						if(d.result.isSuccess == 1){
				            plus.payment.request(channel,d.result.body,function(result){
				                plus.nativeUI.alert("支付成功！",function(){
									_this.payStatus = true
				                });
				            },function(error){
				                plus.nativeUI.alert("支付失败：" + error.code);
				            });
				        } else if (d.result.code == 1) {
				        	plus.payment.request(channel,d.result.json,function(result){
			                	plus.nativeUI.alert("支付成功！",function(){
									_this.payStatus = true
				                });
				            },function(error){
				                plus.nativeUI.alert("支付失败：" + error.code);
				            });
				        } else if(d.code == 1) {
				        	alert(d.msg)
				        } else {
				        	console.log(JSON.stringify(d.result))
				            alert("获取订单信息失败！");
				        }
				    },function(e){
				        alert("获取支付通道失败："+e.message);
				    });
				})
			},
			payCheck(item) { //支付状态
				this.payImg.map(x => {
					x.check = false
				})
				item.check = !item.check
			},
			deleted() { //删除
				this.cancelOrder = true
			},
			num(n) { //让个位前面加0
                return n<10 ? "0" + n : "" + n
            },
            add() { //倒计时
                var _this = this;
                var time = setInterval(() => {
                    if (_this.seconds == 0 && _this.minutes != 0) {
                        _this.seconds = 59;
                        _this.minutes -= 1; 
                    }else if(_this.minutes == 0 && _this.seconds == 0){
                        _this.seconds = 0;
                        clearInterval(time);
                        _this.cancel()
                        _this.$router.goBack()
                    }else{
                        _this.seconds -= 1 
                    }
                },1000);
                this.time = time
            },
            init() {  //默认加载
            	getData('/orders/payInfoDataApi', {
            		userId: sessionStorage.userId,
            		payNo: this.$route.query.id
            	}).then(d => {
					this.info = d
					this.list = d.orderList
					this.locationInfo = d.orderList[0]
					this.list.map(x => {
						x.orderCommodityList.map(i => {
							if(i.expressFee < (i+1).expressFee) {
								x.expressFee = (i+1).expressFee
							} else {
								x.expressFee = i.expressFee
							}
						})
					})
            	})
            },
            cancel() {  //取消订单
            	this.$store.state.isLoading = true
            	getData('/orders/cancelOrderApi', {
            		OrdersID: this.info.orderList[0].OrdersID
            	}).then(d => {
            		this.$store.state.isLoading = false
            		if(d.code == 1) {
            			this.$router.go(-3)
            		}
            	}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
            }
		},
		mounted() {
			this.add()
			this.init()
		},
		computed: {
			second:function () {
                return this.num(this.seconds)
            },
            minute:function () {
                return this.num(this.minutes)
            },
            commodityTotal () {
            	let total = 0
            	this.list.map(x => {
            		total += x.sortPrice * x.buyCount
            	})
            	return total
            },
            total() {
            	let total = 0
            	this.list.map(x => {
            		total += x.sortPrice * x.buyCount
            	})
            	return total
            }
		},
		watch:{
            second:{
                handler(newVal){
                    this.num(newVal)
                }
            },
            minute:{
                handler(newVal){
                    this.num(newVal)
                }
            }
        },
        destroyed() {
        	clearInterval(this.time);
        }
	}
</script>

<style scoped lang="less">
	.order-payStatus {
		background: #c9eb59;
		padding: 0 20px;
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		div:first-child {
			color:#fff;
			font-size: 14px;
			align-items: center;
			display:flex;
			
			img {
				width: 15px;
				height: 15px;
				margin-right: 15px;
			}
		}
		
		div:last-child {
			padding-left: 30px;
			color: #000;
			font-size: 11px;
		}
		
	}
	
	.order-address {
		margin-bottom: 10px;
		padding: 10px 0;
		display: flex;
		font-size: 12px;
		align-items: center;
		background: #FFFFFF;
		justify-content: space-between;
		
		.order-address-img {
			width: 18px;
			height: 20px;
			margin: 0 10px;
			
			img {
				width: 100%;
				height: 100%;
			}
		}
		
		.order-address-content {
			flex: 1;
			padding-right: 10px;
			
			.order-address-content-top {
				display: flex;
				justify-content: space-between;
				
				.order-address-content-top-title {
					
				}
				
				.order-address-content-top-phone {
					display: flex;
					align-items: center;
					
					img {
						width: 15px!important;
						height: 15px!important;
						margin-right: 5px;
					}
				}
			}
			
			.order-address-content-bottom {
				line-height: 16px;
			}
		}
		
		.order-address-right {
			margin: 0 15px;
			
			
			img {
				width: 10px;
				height: 15px;
			}
		}
	}
	
	.order-list {
		margin-bottom: 10px;
		
		.title {
			padding: 10px 150px 10px 15px;
			border-bottom: 1px solid #eee;
			display: flex;
			background: #fff;
			align-items: center;
			
			img {
				width: 20px;
				height: 20px;
				margin-right: 20px;
				
				&:last-child {
					width: 8px;
					height: 12px;
					margin-left: 20px;
				}
			}
		}
		
		.order-list-item {
			padding: 10px 20px;
			display: flex;
			border-bottom: 1px solid #E5E5E5;
			background: #fff;
			
			img {
				width: 90px;
				height: 85px;
				margin-right: 10px;
			}
			
			.right {
				flex: 1;
			}
			
			div {
				font-size: 12px;
				position: relative;
				
				&:nth-child(2) {
					position: relative;
				}
				
				.order-list-item-title {
					display: -webkit-box;
					word-break: break-all;
					text-overflow: ellipsis;
					font-size: 32rpx;
					overflow: hidden;
					margin-bottom: 5px;
					-webkit-box-orient: vertical;
					-webkit-line-clamp:2; 
					padding-right: 30px;
				}
				
				.order-list-type {
					color: #7b7b7b;
				}
				
				.order-list-bottom {
					position: absolute;
					bottom: 0;
					display: flex;
					width: 100%;
					align-items: center;
					justify-content: space-between;
					
					.order-list-num-left {
						color: #c9eb59;
						font-size: 13px;
					}
					
					.order-list-num-right {
						
					}
				}
			}
			
		}
		.order-more-total-item {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			border-bottom: 1px solid #eee;
			background: #fff;
			padding: 10px 15px;
				
			div:nth-child(2) {
				display: flex;
				align-items: center;
					
				img {
					margin-left: 10px;
					width: 10px;
					height: 15px;
				}
					
				.check {
					width: 15px;
					height: 15px;
				}
					
				span {
					color: red;
					display: flex;
					align-items: center;
					font-weight: bold;
					/*font-size: 15px;*/
				}
			}
		}
	}
	
	.order-payment {
		font-size: 12px;
		margin-top: 10px;
		
		.order-payment-item {
			padding: 5px 15px;
			background: #fff;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			div:nth-child(1) {
				display: flex;
				align-items: center;
				
				img {
					margin-right: 10px;
					width: 30px;
					height: 30px;
				}
			}
			
			div:nth-child(2) {
				display: flex;
				align-items: center;
				
				img {
					width: 20px;
					height: 20px;
				}
			}
		}
	}
	
	.order-pay {
		
		.item {
			display: flex;
			justify-content: space-between;
			padding: 5px 10px;
			background: #fff;
			font-size: 12px;
			color: #7b7b7b;
		}
		
		.bottom {
			font-size: 14px;
			color: #000;
			border-top: 1px solid #ccc;
			
			div:last-child {
				color: red;				
			}
		}
	}
	
	.order-fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding-left: 10px;
		
		div {
			display: flex;
			height: 40px;
			justify-content: space-between;
			align-items: center;
			
			span {
				margin: 0 auto;
			}
			
			div:nth-child(1) {
				background: #e5e5e5;
				width: 100px;
				/*color: #7B7B7B;*/
			}
			div:nth-child(2) {
				background: #BBE417;
				width: 100px;
				color: #fff;
			}
		}
		
	}
</style>